<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开始游戏 - 俄罗斯方块</title>
    <!-- TailwindCSS via CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome via Cloudflare CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        /* Optional: Add custom styles or overrides here if needed */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        /* Add a subtle background pattern or gradient if desired */
        body {
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             /* Or a simpler background: bg-gradient-to-br from-purple-600 to-blue-500 */
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4 bg-gray-100">
    <!-- Main Content Card -->
    <div class="bg-white rounded-xl shadow-2xl p-8 md:p-12 max-w-lg w-full text-center transform transition-all hover:scale-105 duration-300">

        <!-- Game Title -->
        <h1 class="text-4xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-blue-600 mb-6">
            <i class="fas fa-cubes mr-2"></i> 俄罗斯方块
        </h1>

        <!-- Placeholder Image -->
        <div class="mb-8 overflow-hidden rounded-lg shadow-lg">
            <img src="https://picsum.photos/seed/tetrisgame/600/350" alt="俄罗斯方块游戏示意图" class="w-full h-auto object-cover">
            <!-- Or use fakeimg.pl: -->
            <!-- <img src="https://fakeimg.pl/600x350/888/eee/?text=Tetris+Game&font=lobster" alt="俄罗斯方块游戏示意图" class="w-full h-auto"> -->
        </div>

        <!-- Action Buttons -->
        <div class="space-y-4">
            <!-- Start Game Button -->
            <button id="startGameBtn" class="w-full bg-gradient-to-r from-green-500 to-teal-500 hover:from-green-600 hover:to-teal-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transform hover:scale-105 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 flex items-center justify-center text-lg">
                <i class="fas fa-play mr-2"></i>
                开始游戏
            </button>

            <!-- View Leaderboard Button -->
            <button id="viewLeaderboardBtn" class="w-full bg-gradient-to-r from-gray-500 to-gray-600 hover:from-gray-600 hover:to-gray-700 text-white font-semibold py-3 px-6 rounded-lg shadow-sm transform hover:scale-105 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 flex items-center justify-center text-lg">
                <i class="fas fa-trophy mr-2"></i>
                查看排行榜
            </button>
        </div>

        <!-- Optional: Footer or version info -->
        <p class="text-xs text-gray-400 mt-8">版本 v1.0.0</p>

    </div>

    <!-- JavaScript for future interactions -->
    <script>
        // Add event listeners later to handle button clicks
        document.getElementById('startGameBtn').addEventListener('click', () => {
            console.log('开始游戏按钮被点击');
            // TODO: Transition to the Play Game screen
            // window.location.href = '/play.html'; // Example navigation
        });

        document.getElementById('viewLeaderboardBtn').addEventListener('click', () => {
            console.log('查看排行榜按钮被点击');
            // TODO: Transition to the View Leaderboard screen
            // window.location.href = '/leaderboard.html'; // Example navigation
        });
    </script>
</body>
</html>
